@extends('admin::layouts.app')

@section('content')
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h3 style="float: left;">分类</h3>
                <button type="button" @click="add()" class="btn btn-primary" style="float: right;">新建分类</button>
            </div>
            <div class="card-body">
                <table class="table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>分类名</th>
                        <th>排序</th>
                        <th>创建时间</th>
                        <th>修改时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in categories">
                        <td>@{{item.id}}</td>
                        <td>@{{item.name}}</td>
                        <td>@{{item.sort}}</td>
                        <td>@{{item.created_at}}</td>
                        <td>@{{item.updated_at}}</td>
                        <td>
                            <button type="button" class="btn" @click="remove(item.id)">删除</button>
                            <button type="button" class="btn" @click="edit(item.id)">修改</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="modal fade" id="category-form">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form>
                        <div class="modal-header">
                            <h4 class="modal-title"></h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="name">分类名:</label>
                                <input type="text" v-model="form.field.name" class="form-control" id="name">
                                <template v-if="form.errors.name"><span class="text-danger" >@{{form.errors.name}}</span></template>
                            </div>
                            <div class="form-group">
                                <label for="sort">排序:</label>
                                <input type="text" class="form-control" v-model="form.field.sort" id="sort">
                                <template v-if="form.errors.sort"><span class="text-danger" >@{{form.errors.sort}}</span></template>
                            </div>
                            <div class="form-group">
                                <label for="description">栏目描述:</label>
                                <input type="text" class="form-control" v-model="form.field.description" id="description">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" @click="submitForm()">保存</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <confirm-component ref="confirm"></confirm-component>
    </div>
@endsection
@section('scripts')
    <script>
        new Vue({
            el:'#app',
            mounted() {
                this.getData();
            },
            data() {
                return {
                    form:{
                        field:{
                            name:'',
                            description:'',
                            sort:null,
                            id:null
                        },
                        errors:{}
                    },
                    categories:{}
                }
            },
            methods:{
                submitForm() {
                    axios.post('/admin/save_category',this.form.field).then((response) => {
                        if (response.status) {
                            $('#category-form').modal('hide');
                            this.getData();
                        }
                    }).catch((error) => {
                        if (error.response.status == 422) {
                            this.form.errors = error.response.data.errors;
                        }
                    });
                },
                getData() {
                    axios.get('/admin/get_categories').then((response) =>{
                        this.categories = response.data;
                    }).catch(function (error){
                        console.log(error)
                    });
                },
                remove(id) {
                    this.$refs.confirm.dialog('您确定要删除该分类吗？',() => {
                        axios.post('/admin/delete_category',{id:id}).then((response) =>{
                            if (response.data.status) {
                                this.getData();
                            }
                        }).catch(function (error){
                            console.log(error)
                        });
                    },function(){

                    });
                },
                add() {
                    this.clearForm();
                    $('#category-form .modal-title').html('添加分类');
                    $('#category-form').modal('show');
                },
                edit(id) {
                    this.clearForm();
                    this.form.field.id = id;
                    $('#category-form .modal-title').html('修改分类');
                    axios.get('get_category/' + id).then((response) => {
                        this.form.field = response.data
                    }).catch((error) => {
                        console.log(error)
                    });
                    $('#category-form').modal('show');
                },

                clearForm() {
                    this.form.field = {};
                    this.form.errors = {};
                }
            }
        });
    </script>
@endsection
